<template>
    <div class="chat_error_container">
        <div class="chat_error_item">
            {{ props.itemInfo.content }}
        </div>
        <span class="chat_error_name">:Robot</span>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';

    const props = defineProps(['itemInfo'])
    const emit = defineEmits(['notifyError'])

    onMounted(()=>{
        emit('notifyError')
    })
</script>

<style scoped>
    .chat_error_container {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    .chat_error_container .chat_error_item {
        max-width: 80%;
        padding: 8px;
        color: black;
        border-radius: 5px;
        border-color: red;
        border-width: 2px;
        border-style: solid;
        font-size: 20px;
    }
    .chat_error_container .chat_error_name {
        margin-left: 5px;
        font-size: 20px;
    }
</style>